<template>
    <div class="video-content" @click="prevent($event)">
        <div class="ply-btn" v-show="flag"  @click="play">
        </div>
        <video :id="playid" class="video-js" >
        <source :src="videoData.media_info.mp4_hd_url" type="video/mp4">
        </video>
    </div>
</template>

<script>
export default {
    name: 'videopart',
    props:{
        videoData:{
            type: Object,
             defluat:()=>{
             return {}
             }
        },
        vid:{
            type:String,
            default:''
        }
    },
    data(){
        let playid='id'+this.vid+Date.now()
        return{
            playid:playid,
            flag:true
        }
    },
    mounted(){
        let options={
            controls:true,
            preload:'auto',
            poster:this.videoData.page_pic.url,
            fluid:true,
            bigPlayButton:false
        }
        this.player=this.$video(this.playid,options,()=>{
        })
        this.player.on('play',()=>{
            this.played=false
            this.$videoPlayerList.forEach((item)=>{
                if(item.id_ !=this.playid){
                    item.pause()
                }
            })
        })
        this.$videoPlayerList.push(this.player)
    },
    methods:{
        play(){
                this.player.play()
                this.flag=false
        },
        prevent(e){
            e.stopPropagation()
        }
    }
}
</script>
<style scoped>
    .video-content{
        position: relative;  
        padding-left: 10px;
        padding-right: 10px;
    }
    .ply-btn{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 38px;
        height: 38px;
        transform: translate(-50%,-50%);
        background-image: url('./play.png');
        background-repeat: no-repeat;
        z-index: 66;
    }
</style>